 <template>
    <el-submenu :index="routes.name" v-if="hasOneShowingChild(routes)&&routes.hidden !== true">
        <template slot="title">
            <i :class="routes.meta.icon"></i>
            <span slot="title">{{routes.meta.title}}</span>
        </template>
        <sidebar-item v-for="(item,i) in routes.children" :key="i" :routes="item" />
    </el-submenu>
    <el-menu-item :index="routes.name" v-else-if="routes.hidden!==true">
        <i :class="routes.meta.icon"></i>
        <span slot="title">{{routes.meta.title}}</span>
    </el-menu-item>
</template>

<script>
export default {
    name: "sidebarItem",
    props: {
        routes: {
            type: Object,
            default: () => {},
        },
    },
    methods: {
        hasOneShowingChild(routes) {
            if (routes.children) {
                return routes.children.some((item) => item.hidden !== true);
            }
            return false;
        },
    },
};
</script>

